import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'

import { theme } from 'ant-design-vue';

const { darkAlgorithm, compactAlgorithm } = theme;

const TokenKey = 'Theme'

export const UseThemeStore = defineStore('Theme', () => {
    // 推荐用于完整类型推断的箭头函数
    const list = reactive([
        {
            name: '默认主题',
            key: 'default',
            config: {

            }
        },
        {
            name: '黑暗模式',
            key: 'dark',
            config: {
                algorithm: [darkAlgorithm],
                "token": {}
            }
        },
        {
            name: '测试主题',
            key: 'test',
            config: {
                "token": {
                    "colorPrimary": "#ff1919",
                    "fontSize": 16,
                    "borderRadius": 14,
                    "borderRadiusXS": 8,
                    // "wireframe": true
                }
            }
        },
    ])

    const config = ref({});
    const Ans = ref('default');

    var _t = window.localStorage.getItem(TokenKey);
    Ans.value = _t ? _t : 'default';

    const changeTheme = function (key) {
        Ans.value = key;
        window.localStorage.setItem(TokenKey, key)
        for (let i = 0; i < list.length; i++) {
            const element = list[i];
            if (element.key == key) {
                config.value = element.config
            }
        };
        return config.value
    };

    changeTheme(Ans.value);

    return { Ans, list, config, changeTheme }
})